<template>
  <div class="employees-container">
    <div class="app-container">
      <PageTools>
        <template #left>
          <i class="el-icon-info" />
          <span>共16条记录</span>
        </template>
        <template #right>
          <el-button type="danger" size="small">普通excel导出</el-button>
          <el-button type="info" size="small">复杂标头ecxel导出</el-button>
          <el-button type="success" size="small">excel导入</el-button>
          <el-button type="primary" size="small" @click.native="showDialog">新增员工</el-button>
        </template>
      </PageTools>
      <el-card style="margin-top: 10px;">
        <el-table border :data="list">
          <el-table-column label="序号" type="index" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="头像" prop="staffPhoto">
            <template #default="{row}">
              <img v-if="row.staffPhoto" id="img" :src="row.staffPhoto" alt="">
              <div v-else />
            </template>
          </el-table-column>
          <el-table-column label="手机号" prop="mobile" />
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="聘用形式" prop="formOfEmployment">
            <template #default="scope">
              <!-- 如果后端返回的是数字，前端可以通过对象的映射关系，来渲染页面
               因为属性时会改变的，所以取数据应该用对象【key】的形式  -->
              {{ hireMap[+scope.row.formOfEmployment] || '未知' }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间" prop="timeOfEntry">
            <template #default="scope">
              {{ formateTime(scope.row.timeOfEntry) }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template>
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small">角色</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" align="middle" style="height:60px;">
          <el-pagination
            :page-size="params.size"
            :total="total"
            :current-page="params.page"
            layout="total, prev, pager, next"
            hide-on-single-page
            @current-change="currentChangeFn"
          />
        </el-row>
      </el-card>
    </div>
    <AddDialog :dialog-visible="dialogVisible" @close="closeDialog" />
  </div>
</template>

<script>
import { getEmployeeList } from '@/api'
import AddDialog from './components/AddDialog.vue'
import dayjs from 'dayjs'
export default {
  components: {
    AddDialog
  },
  data() {
    return {
      params: {
        page: 1,
        size: 10
      },
      list: [],
      total: 0,
      hireMap: {
        1: '正式',
        2: '非正式'
      },
      dialogVisible: false
    }
  },
  created() {
    this.fetchEmployeeList()
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
    },
    // 分页器事件
    currentChangeFn(val) {
      this.params.page = val
      this.fetchEmployeeList()
    },
    // 格式化时间
    formateTime(value) {
      return dayjs(value).format('YYYY-MM-DD')
    },
    async fetchEmployeeList() {
      // 使用结构赋值的时候需要确认好结构的字段和对象中的字段是否一致
      // 使用了多层结构 （实际开发中不推荐）
      const { data: { rows, total }} = await getEmployeeList(this.params)
      this.list = rows
      this.total = total
    }
  }
}

</script>
<style lang='scss' scoped>
#img {
  width: 90px;
  height: 90px;
  padding: 10px;
  border-radius: 50%;
}
</style>
